<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:th="http://www.thymeleaf.org">
<head th:include="_header_include::frag(~{::title},~{::style},~{})">
    <title>日志管理</title>
    <style>
    	.el-message-box{width:800px;}
    	.el-message-box__message{height: 500px;overflow-y: scroll;}
    </style>
</head>
<body>
<div id="organizationManage" class="organizationManage mainPadding" style="display: none;">  
    <el-breadcrumb separator="/" class="elBreadcrumb marginB20">
        <el-breadcrumb-item>Home</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>日志管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs type="card" v-model="activeName" @tab-click="handleClick" >
      <el-tab-pane label="访问日志" name="first"></el-tab-pane>
      <el-tab-pane label="操作日志" name="second"></el-tab-pane>
    </el-tabs>
    <div class="mainSearchBg">        
        <div class="mainSearchFormBox">
            <el-form :inline="true" class="demo-form-inline mainSearchForm">
              <el-form-item label="日志内容:">
        			   <el-input v-model="content" placeholder="日志内容"></el-input>
              </el-form-item>              
              <el-form-item label="请选择:" style="margin-right: 10px;">
        			  <el-select v-model="queryType" placeholder="请选择" clearable >
        			    <el-option
        			      v-for="item in options"
        			      :key="item.value"
        			      :label="item.label"
        			      :value="item.value">
        			    </el-option>
        			  </el-select>
              </el-form-item>
              <el-form-item label="">
                    <el-input v-model="searchContent" placeholder="请输入查询内容"></el-input>
                  </el-form-item>
              <el-form-item label="操作时间:">
                <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="beginTime" type="datetime" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="—" class="widthauto">
                 <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" v-model="endTime" type="datetime" placeholder="选择日期"></el-date-picker>
              </el-form-item>
              <el-row v-show="isShow">
                  <el-form-item label="操作类型:">
                      <el-select v-model="operationType" placeholder="操作类型" clearable>
                          <el-option
                            v-for="item in operationtypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                      </el-select>
                  </el-form-item> 
              </el-row>
              <div class="mainSearchBtnBox">
        			    <el-button icon="el-icon-search" type="primary" @click="search" class="searchBtn">搜索</el-button>
                  <!-- <el-button type="info" class="searchBtn">取消</el-button> -->
                  <span style="color: #5c6be8;cursor: pointer;margin:0 10px;" @click="toogleClick"><span v-if="isShow">收起</span><span v-else>展开更多</span><i :class="{'greycolor paddingL6 el-icon-arrow-up':isShow,'greycolor paddingL6 el-icon-arrow-down':!isShow}"></i></span>
              </div> 
            </el-form>
        </div>    
        <el-row>
            <el-table 
                ref="multipleTable"
                tooltip-effect="dark"
                empty-text="无数据"
                style="width: 100%"
                border
                :data="dataTable" 
                >
                <el-table-column  type="index"  align="center" prop="name" label="序号" width="55"></el-table-column>
                 <!-- <el-table-column prop="date" label="全选" width="180"></el-table-column>  -->
                <el-table-column align="center" prop="userName" label="登录名称"></el-table-column>
                <el-table-column align="center" prop="name" label="姓名"></el-table-column>
                <el-table-column align="center" prop="phone" label="登录手机号"></el-table-column>
                <el-table-column align="center" prop="remoteIP" label="登录IP"></el-table-column>
                <el-table-column align="center" prop="menuName" label="操作模块"></el-table-column>
                <el-table-column align="center" prop="operationType" :formatter="transformStatus" label="操作类型"></el-table-column>
                <el-table-column align="center" prop="requestParam" label="日志内容">
                  <template slot-scope="scope" >
                    <el-button type="text" @click="open(scope.row.requestParam)">{{scope.row.description}}：{{scope.row.logId}}</el-button>
    			        </template>

                </el-table-column>
                <el-table-column align="center" prop="reqStartTime" label="操作时间"></el-table-column>
            </el-table>
            <table-pagination :pager="pager" @change="queryLogDataList"></table-pagination>
        </el-row>
    </div>  
</div>
</body>
<!-- import common js-->
<div th:include="_footer_include :: #jsLib"></div>
<script th:inline="javascript">

    var orgData=[[${orgData}]];
	var beginTime = [[${beginTime}]];
	var endTime = [[${endTime}]]
   var orgVM =  new Vue({
        el: '#organizationManage',
        data: function() {
            return {
              isShow:false,
            	activeName: 'second',
            	beginTime:beginTime,
            	endTime:endTime,
            	logintype:"1",
            	operationType:"INSERT",
            	content:"",
            	userName:"",
            	queryType:"",
            	searchContent:"",
                dataTree: orgData,//组织结构tree
                dataTable:[],
                multipleSelection: [],
                dialogFormVisible: false,
                options: [{
                	value: '1',
                    label: '登录名称'	
                	},
                	{
                   	value: '2',
                    label: '姓名'	
                   	},
                	{
                    value: '3',
                    label: '手机号'	
                    }
                ],
                operationtypes: [{
                	value: 'INSERT',
                    label: '添加'	
                	},
                	{
                   	value: 'UPDATE',
                    label: '修改'	
                   	},
                	{
                    value: 'DELETE',
                    label: '删除'	
                    },
                    {
                    value: 'DISABLE',
                    label: '禁用'	
                    },
                    {
                    value: 'Enable',
                    label: '启用'	
                    }
                    ,
                    {
                    value: 'EXPORT',
                    label: '导出'	
                    },
                    {
                    value: 'IMPORTS',
                    label: '导入'	
                     }
                    ,
                    {
                    value: 'PUSH',
                    label: '推送'	
                    }
                    ,
                    {
                    value: 'DISTRIBUTION',
                    label: '分配'	
                    }
                    ,
                    {
                    value: 'TRANSFER',
                    label: '转移'	
                    }
                    ,
                    {
                    value: 'RELEASE',
                    label: '释放'	
                    }
                    ,
                  {
                    value: 'RECEIVE',
                    label: '领取'
                  }
                  ,
                  {
                    value: 'OUTBOUNDCALL',
                    label: '外呼'
                  }
                ],
                
                pager:{
                    total: 0,
                    currentPage: 1,
                    pageSize: 20,
                },
             
            }             
        },
        methods: {
        	search(){
        		this.pager.currentPage = 1;
        		this.queryLogDataList()
        	},
        	queryLogDataList(){//查询按钮
        		var param = {}; 
        	  var pageSize = this.pager.pageSize;
            var pageNum = this.pager.currentPage;
            param.pageNum = pageNum;
            param.pageSize = pageSize;
            param.beginTime=this.beginTime;
            param.endTime=this.endTime;
            param.content=this.content;
            param.queryType=this.queryType;
            param.searchContent=this.searchContent;
            param.operationType=this.operationType;
            param.operationType=this.operationType;
            param.visitType = 2;
            if(this.beginTime !=null && this.beginTime != '' && this.endTime !=null && this.endTime != '' && this.beginTime>this.endTime){
          	  this.$message("开始时间不能大于结束时间");
     	         return;
            }
            
            console.log(param);
              axios.post('/log/log/queryLogDataList',param).then(function (response) {
              	//  console.log(response);
                         if(null===response||response.data==null||response.data.code!='0'){
                      	  console.log(response.data.message);
                      	  return ;
                         }else{
                        	 orgVM.dataTable =response.data.data.data; 
                        	 orgVM.pager.currentPage= response.data.data.currentPage;
                        	 orgVM.pager.total= response.data.data.total; 
                         }
              })
              .catch(function (error) {
                console.log(error);
              })
              .then(function () {
              });  
                
            } ,
          
            handleClick(tab, event) {
              if(tab.name='first'){
              	window.location.href="/log/log/visitLog";
              }else{
              	window.location.href="/log/log/operationLog";
              }
            },
            transformStatus(row, column, cellValue, index) {
          	  var text="";
                if(cellValue=="INSERT"){
              	  text="添加"
                }else if(cellValue=="UPDATE"){
              	  text="修改"
                }else if(cellValue=="DELETE"){
              	  text="删除"
                }else if(cellValue=="EXPORT"){
              	  text="导出"
                }else if(cellValue=="PUSH"){
              	  text="推送"
                }else if(cellValue=="DISTRIBUTION"){
              	  text="分配"
                }else if(cellValue=="RELEASE"){
              	  text="释放"
                }else if(cellValue=="TRANSFER"){
              	  text="转移"
                }else if(cellValue=="DISABLE"){
              	  text="禁用"
                }else if(cellValue=="ENABLE"){
              	  text="启用"
                }else if(cellValue=="IMPORTS"){
              	  text="导入"
                }else if(cellValue=="RECEIVE"){
                  text="领取"
                }else if(cellValue=="OUTBOUNDCALL"){
                  text="外呼"
                }
                return text;
            }, 
            open(param){
      	         this.$alert(param, '日志详情', { 
       	           confirmButtonText: '确定'
       	         
      	         })
            },
            toogleClick(){
              if(this.isShow){
                  this.isShow=false
              }else{
                  this.isShow=true
              }          
          },
         	
        },
        created(){
          var localVal=localStorage.getItem('allChangePageSize')?parseInt(localStorage.getItem('allChangePageSize')):'';
          if(localVal){this.pager.pageSize = localVal;}
        	this.queryLogDataList();
        },//created方法 结束
        mounted(){
            document.getElementById('organizationManage').style.display = 'block';
        }
    })
</script>
</html>